<template>
	<div class="wy-main business-circuit">
		<a-row class="wy-main-title">
			<a-col :span="24">
				<p class="title-p">
					<a-divider class="title-vertical"  type="vertical" />
					<span class="title-span" >发布线路信息</span>
					<a-divider class="title-divider"  />
				</p>
			</a-col>
		</a-row>
		<div>
		 	<a-tabs defaultActiveKey="1" class="wy_tab" @change="tabNavChange">
			    <a-tab-pane tab="公路运输线路" key="1"></a-tab-pane>
			    <a-tab-pane tab="铁路运输线路" key="2"></a-tab-pane>
			    <a-tab-pane tab="航空运输线路" key="3"></a-tab-pane>
			    <a-tab-pane tab="海路运输线路" key="4"></a-tab-pane>
			    <a-tab-pane tab="水路运输线路" key="5"></a-tab-pane>
			</a-tabs>
			<p v-if="lineType==1" class="road-tips">公路运输线路是物流云推出的精准匹配的优质物流运输服务，推荐的物流承运商是物通网上门核实过的，请放心选择，让您发货放心又省钱！</p>
			<p v-if="lineType==2" class="road-tips">铁路运输线路是物流云推出的精准匹配的优质物流运输服务，推荐的物流承运商是物通网上门核实过的，请放心选择，让您发货放心又省钱！</p>
			<p v-if="lineType==3" class="road-tips">航空运输线路是物流云推出的精准匹配的优质物流运输服务，推荐的物流承运商是物通网上门核实过的，请放心选择，让您发货放心又省钱！</p>
			<p v-if="lineType==4" class="road-tips">海路运输线路是物流云推出的精准匹配的优质物流运输服务，推荐的物流承运商是物通网上门核实过的，请放心选择，让您发货放心又省钱！</p>
			<p v-if="lineType==5" class="road-tips">水路运输线路是物流云推出的精准匹配的优质物流运输服务，推荐的物流承运商是物通网上门核实过的，请放心选择，让您发货放心又省钱！</p>
			<div class="public-road-title" style="margin-bottom:12px;">线路信息</div>
			<!-- 选择线路信息 -->
			<PublishForm v-if="lineType!=5" :lineType="lineType" ref="lineFrom" type="add"></PublishForm>
			<p v-if="lineType==5" class="wy-align-center">暂无数据</p>
		</div>
	</div>
</template>
<script>
	import PublishForm from './components/PublishForm'
	export default {
		data() {
			return {
				// 线路类型 1公路 2铁路 3航空 4海路
			  	lineType: 1,
			}
		},
		components: {
			PublishForm
		},
		beforeCreate() {
		},
		created() {
		},
		methods: {
			// 导航切换
			tabNavChange(key){
				this.$refs.lineFrom&&setTimeout(()=>{
					this.$refs.lineFrom.fromReset();
				},100)
				this.lineType = key;
			},
		}
	}
</script>

<style lang="less">
	
.business-circuit{
	.wy_tab{
		.ant-tabs-nav .ant-tabs-tab-active:hover{
			color:#fff
		}
		.ant-tabs-nav .ant-tabs-tab-active:active{
			color:#fff
		}
	}
	.ant-tabs{
		.ant-tabs-bar{
		border-bottom:none !important;
	}
	.ant-tabs-ink-bar{
		background-color:none !important;
		right:0 !important;
	}
	.ant-tabs-ink-bar{
			height:0 !important;
			bottom:0 !important;
			right:0 !important;
		}
	}
	.ant-tabs-nav{
		.ant-tabs-tab{
			// padding:12px 13px;
	  	 background:#E9F4F3;
	  	 color:#15837A;
	  	 margin-right:20px;
	  	 font-size:16px;
		}
		 .ant-tabs-tab-active{
	  	color:#FFFFFF;
	  	background:#15837A;
	  }
	}

	//提示
	.road-tips{
		font-size:12px;
		color:#666666;
		line-height:13px;
	}
}
</style>